﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>商城详情页</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="css/iconfont.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/goods-detail.css" rel="stylesheet" />
  </head>
  <body>
    <!--头部-->
    <div class="topper">
      <div class="wrapper">
        <div class="left-bar">
          <div class="back-home divider">
            <em></em><a href="index.html">商城首页</a>
          </div>
          <div class="item"><a href="">商家中心</a></div>
        </div>
        <div class="right-bar">
          <div class="login-user sub-menu">
            <a class="menu-hd" href="">txtangxia<em></em></a>
            <div class="down">
              <a href="">内容</a><a href="">内容</a><a href="">内容</a>
            </div>
          </div>
          <div class="item">
            <a href="">消息（<span class="txt-theme">0</span>）</a>
          </div>
          <div class="logout divider"><a href="">退出</a></div>
          <span class=""></span>
          <div class="cart">
            <em></em><a href="">购物车<span class="txt-theme">2</span>件</a>
          </div>
          <div class="order"><em></em><a href="">我的订单</a></div>
          <div class="fav"><em></em><a href="">我的收藏</a></div>
          <div class="help"><em></em><a href="">帮助中心</a></div>
        </div>
      </div>
    </div>
    <div class="shop-header wrapper">
      <div class="logo">
        <a href="index.html"><img src="picture/logo.png" alt="logo" /></a>
      </div>
      <div class="shop-meta">
        <span class="ico"></span>
        <div class="info">
          <div class="name">女神屋女装</div>
          <div class="meta">
            [&nbsp;描述&nbsp;<span class="txt-warn">4.6</span
            >&ensp;质量&nbsp;<span class="txt-theme">4.8</span
            >&ensp;服务&nbsp;<span class="txt-theme">4.9</span
            >&ensp;发货&nbsp;<span class="txt-theme">4.8</span>&nbsp;]
          </div>
        </div>
      </div>
      <div class="shop-schbox">
        <div class="layout">
          <form action="" method="">
            <input class="search-txt" placeholder="搜流行宝贝" /><button
              class="search-btn site"
            >
              搜全站</button
            ><button class="search-btn shop">搜本店</button>
            <div class="suggest-box">
              <div class="item" data-title="上衣 短款 短袖">
                上衣 短款 短袖
                <div class="tags">
                  <span>雪纺</span><span>蕾丝</span><span>一字领</span>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="shop-nav-box">
      <div class="shop-nav wrapper">
        <div class="shop-nav-all">
          <a href="">所有宝贝</a>
          <div class="sublist">
            <a href="">短袖T恤/吊带</a><a href="">连体裤</a><a href="">吊带</a>
          </div>
        </div>
        <ul class="shop-nav-rec">
          <li><a href="">首页</a></li>
          <li><a href="">2016春夏新品</a></li>
          <li><a href="">女鞋</a></li>
          <li><a href="">童鞋</a></li>
        </ul>
      </div>
    </div>
    <!--头部-->
    <div class="wrapper">
      <div class="detail-top clearfix">
        <div class="detail-goods">
          <div class="detail-show">
            <div class="origin-show">
              <div class="zoomup"></div>
              <img
                class="big-pic"
                src="picture/2.jpg"
                alt="百搭清新花朵两件套连衣裙"
              />
            </div>
            <div class="thumb-show">
              <span class="item"
                ><img
                  class="s-pic"
                  src="picture/3.jpg"
                  bsrc="uploads/2.jpg" /></span
              ><span class="item"
                ><img
                  class="s-pic"
                  src="picture/4.jpg"
                  bsrc="uploads/4.jpg" /></span
              ><span class="item"
                ><img
                  class="s-pic"
                  src="picture/5.jpg"
                  bsrc="uploads/5.jpg" /></span
              ><span class="item"
                ><img
                  class="s-pic"
                  src="picture/3.jpg"
                  bsrc="uploads/3.jpg" /></span
              ><span class="item"
                ><img class="s-pic" src="picture/3.jpg" bsrc="uploads/3.jpg"
              /></span>
            </div>
            <div class="zoom-show"><img src="" alt="" /></div>
          </div>
          <div class="detail-info">
            <div class="item-title">百搭清新花朵两件套连衣裙</div>
            <div class="item-price">
              <span class="now">￥49.00</span><span class="dft">￥69.00</span>
            </div>
            <ul class="item-data clearfix">
              <li class="col-4">
                销量<span class="txt-theme ml10">27件</span>
              </li>
              <li class="col-4">
                好评率<span class="txt-theme ml10">99%</span>
              </li>
              <li class="col-4">
                收藏<span class="txt-theme ml10">228人</span>
              </li>
            </ul>
            <div class="sku-info">
              <div class="prop">
                <div class="dt">颜色：</div>
                <div class="dd">
                  <ul class="chose-img">
                    <li>
                      <a href=""><img src="picture/6.jpg" alt="" /></a>
                    </li>
                    <li>
                      <a class="active" href=""
                        ><img src="picture/6.jpg" alt=""
                      /></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="prop">
                <div class="dt">尺寸：</div>
                <div class="dd">
                  <ul class="chose-common">
                    <li><a href="">M</a></li>
                    <li><a class="active" href="">S</a></li>
                    <li><a class="disable" href="">XL</a></li>
                    <li><a href="">XXL</a></li>
                  </ul>
                </div>
              </div>
              <div class="prop">
                <div class="dt">数量：</div>
                <div class="dd">
                  <div class="mod-numbox chose-num" data-max="30">
                    <span class="count-minus"></span
                    ><input
                      class="count-input"
                      value="1"
                      type="text"
                      name="num"
                    /><span class="count-plus"></span>
                  </div>
                  <span>（限购30件）</span>
                  <div class="stock">(库存102件)</div>
                </div>
              </div>
            </div>
            <div class="item-action">
              <a href="cart.html" class="buy-now">立即购买</a
              ><a href="cart.html" class="add-cart">加入购物车</a>
            </div>
            <div class="item-extend">
              <!-- <a href="" class="fav"><i class="iconfont icon-star"></i>收藏</a>-->
              <a href="" class="fav">已收藏</a
              ><a href="" class="share"
                ><i class="iconfont icon-fenxiang"></i>分享</a
              >
            </div>
          </div>
        </div>
        <div class="detail-shop">
          <div class="clearfix">
            <a class="shop-brand" href=""><img src="picture/1.png" alt="" /></a>
            <div class="shop-intro">
              <div class="shop-name">女神屋</div>
              <!-- <a class="shop-follow-btn" href="javascript:;"><i class="iconfont icon-jiaguanzhu"></i>关注</a>-->
              <a class="shop-follow-btn active" href="javascript:;"
                ><span class="showtxt"
                  ><i class="iconfont icon-check01"></i>已关注</span
                ><span class="hidetxt">取消关注</span></a
              >
              <div class="shop-follow-count"><strong>268</strong>粉丝</div>
            </div>
          </div>
          <div class="shop-assess clearfix">
            <div class="col col-3">
              <div class="tit">描&ensp;述</div>
              <div class="point">
                <span class="num">4.8</span><i class="iconfont">--</i>
              </div>
            </div>
            <div class="col col-3">
              <div class="tit">质&ensp;量</div>
              <div class="point up">
                <span class="num">4.9</span><i class="iconfont">--</i>
              </div>
            </div>
            <div class="col col-3">
              <div class="tit">服&ensp;务</div>
              <div class="point down">
                <span class="num">4.7</span><i class="iconfont">--</i>
              </div>
            </div>
            <div class="col col-3">
              <div class="tit">发&ensp;货</div>
              <div class="point">
                <span class="num">4.8</span><i class="iconfont">--</i>
              </div>
            </div>
          </div>
          <ul class="shop-info">
            <li>所在地区：广东广州</li>
            <li>商品数量：518</li>
            <li>销售数量：60285</li>
            <li>
              店铺资质：<img class="ico" src="picture/approve.png" alt="" />
            </li>
          </ul>
          <a class="detail-shop-enter"
            ><i class="iconfont icon-dianpu"></i>进入店铺</a
          >
        </div>
      </div>
      <!-- 商品推荐 -->
      <div class="ui-tabs"><span class="item active">店长推荐</span></div>
      <ul class="detail-rec clearfix">
        <li>
          <a href="" class="figure"><img src="picture/8.jpg" alt="" /></a>
          <div class="name"><a href="">无袖修身镂空蕾丝连衣裙</a></div>
          <div class="price">￥119.00</div>
        </li>
        <li>
          <a href="" class="figure"><img src="picture/8.jpg" alt="" /></a>
          <div class="name"><a href="">无袖修身镂空蕾丝连衣裙</a></div>
          <div class="price">￥119.00</div>
        </li>
        <li>
          <a href="" class="figure"><img src="picture/8.jpg" alt="" /></a>
          <div class="name"><a href="">无袖修身镂空蕾丝连衣裙</a></div>
          <div class="price">￥119.00</div>
        </li>
        <li>
          <a href="" class="figure"><img src="picture/8.jpg" alt="" /></a>
          <div class="name"><a href="">无袖修身镂空蕾丝连衣裙</a></div>
          <div class="price">￥119.00</div>
        </li>
        <li>
          <a href="" class="figure"><img src="picture/8.jpg" alt="" /></a>
          <div class="name"><a href="">无袖修身镂空蕾丝连衣裙</a></div>
          <div class="price">￥119.00</div>
        </li>
        <li>
          <a href="" class="figure"><img src="picture/8.jpg" alt="" /></a>
          <div class="name"><a href="">无袖修身镂空蕾丝连衣裙</a></div>
          <div class="price">￥119.00</div>
        </li>
      </ul>
      <!-- 商品推荐 -->
      <div class="detail-bottom clearfix">
        <div class="detail-main">
          <div class="detail-tabs">
            <a class="item" href="javascript:;">详情描述</a
            ><a class="item" href="javascript:;">规格参数</a
            ><a class="item" href="javascript:;">商品评价</a>
          </div>
          <div class="tab-con">
            <div class="mod-type-cont"><img src="picture/10.jpg" alt="" /></div>
          </div>
          <div class="tab-con">
            <div class="detail-stand">
              <div class="tit">主体规格参数</div>
              <div class="attr">
                <div class="name">品牌</div>
                <div class="value">Sacon帅康</div>
              </div>
              <div class="attr">
                <div class="name">品牌</div>
                <div class="value">Sacon帅康</div>
              </div>
              <div class="attr">
                <div class="name">品牌</div>
                <div class="value">Sacon帅康</div>
              </div>
              <div class="attr">
                <div class="name">品牌</div>
                <div class="value">Sacon帅康</div>
              </div>
              <div class="attr">
                <div class="name">品牌</div>
                <div class="value">Sacon帅康</div>
              </div>
            </div>
          </div>
          <div class="tab-con">
            <div class="detail-pj">
              <div class="detail-pj-nav list clearfix">
                <div class="col col1">评价心得</div>
                <div class="col col2">满意度</div>
                <div class="col col3">商品信息</div>
                <div class="col col4">评价用户</div>
              </div>
              <div class="detail-pj-cont">
                <div class="reply list clearfix">
                  <div class="col col1">
                    不错，一次完美购物<span class="time">2016-02-23 15:56</span>
                  </div>
                  <div class="col col2">[好评]</div>
                  <div class="col col3">尺码:XL<br />颜色分类：灰色</div>
                  <div class="col col4">
                    <img class="hdpic" width="40" height="40" src="" />
                    <div>糖果</div>
                  </div>
                </div>
                <div class="reply list clearfix">
                  <div class="col col1">
                    不错，一次完美购物<span class="time">2016-02-23 15:56</span>
                  </div>
                  <div class="col col2">[好评]</div>
                  <div class="col col3">尺码:XL<br />颜色分类：灰色</div>
                  <div class="col col4">
                    <img class="hdpic" width="40" height="40" src="" />
                    <div>糖果</div>
                  </div>
                </div>
              </div>
              <div class="pages mb30">
                <a class="prev" href="">上一页</a><a href="">1</a><span>2</span
                ><a href="">3</a><a href="">4</a><i>...</i><a href="">71</a
                ><a class="next" href="">下一页</a>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-aside">
          <div class="detail-aside-box mb15">
            <div class="big-tit">商品分类</div>
            <div class="detail-menu">
              <div class="item">
                <div class="type" data-action="shopd-type">
                  <span class="iconfont"></span><a href="">男鞋</a>
                </div>
                <ul class="c-type">
                  <li><a href="">圆头鞋</a></li>
                  <li><a href="">马丁靴</a></li>
                  <li><a href="">豆豆鞋</a></li>
                  <li><a href="">帆布鞋</a></li>
                  <li><a href="">单鞋</a></li>
                </ul>
              </div>
              <div class="item">
                <div class="type" data-action="shopd-type">
                  <span class="iconfont"></span><a href="">女鞋</a>
                </div>
                <ul class="c-type">
                  <li><a href="">圆头鞋</a></li>
                  <li><a href="">马丁靴</a></li>
                  <li><a href="">豆豆鞋</a></li>
                  <li><a href="">帆布鞋</a></li>
                  <li><a href="">单鞋</a></li>
                </ul>
              </div>
              <div class="item">
                <div class="type" data-action="shopd-type">
                  <span class="iconfont"></span><a href="">童鞋</a>
                </div>
                <ul class="c-type">
                  <li><a href="">圆头鞋</a></li>
                  <li><a href="">马丁靴</a></li>
                  <li><a href="">豆豆鞋</a></li>
                  <li><a href="">帆布鞋</a></li>
                  <li><a href="">单鞋</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="detail-aside-box">
            <div class="big-tit">店铺热销</div>
            <ul class="detail-hot">
              <li>
                <a href="" class="figure"><img src="picture/9.jpg" alt="" /></a>
                <div class="name"><a href="">诗凡黎2016夏装新品海军风</a></div>
                <div class="price">
                  <span class="now">¥149.00</span
                  ><span class="origin">¥298.00</span>
                </div>
              </li>
              <li>
                <a href="" class="figure"><img src="picture/9.jpg" alt="" /></a>
                <div class="name"><a href="">诗凡黎2016夏装新品海军风</a></div>
                <div class="price">
                  <span class="now">¥149.00</span
                  ><span class="origin">¥298.00</span>
                </div>
              </li>
              <li>
                <a href="" class="figure"><img src="picture/9.jpg" alt="" /></a>
                <div class="name"><a href="">诗凡黎2016夏装新品海军风</a></div>
                <div class="price">
                  <span class="now">¥149.00</span
                  ><span class="origin">¥298.00</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--脚部-->
    <div class="fatfooter"></div>
    <!--脚部-->
  </body>
  <script src="js/jquery.js"></script>
  <link rel="stylesheet" href="css/slick.css" />
  <script src="js/slick.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    /*商品数量操作*/    function goodsCount(o){            if(!(o instanceof Object)) var o={};            var inputCell = o.inputCell || ".count-input",                minusCell = o.minusCell || ".count-minus",                plusCell = o.plusCell || ".count-plus",                disClass = o.disClass || "disabled";            return this.each(function(){                var $wrap = $(this),                    $input = $(inputCell,$wrap),                    $minus = $(minusCell,$wrap),                    $plus = $(plusCell,$wrap),                    maxnum=parseInt($wrap.attr('data-max')) || false,                    minnum=$wrap.attr('data-min') || 1,                    initnum=$input.val() || minnum;                /*初始*/                $input.val(initnum);                checkIlegal();                function checkIlegal(){                    var value =parseInt($input.val());                    //                     if (maxnum&&value>maxnum) {                        $input.val(maxnum);                    }                    else if (value<minnum) {                        $input.val(minnum);                    }                    if(value<=minnum){                        $minus.addClass(disClass);                    }else{                        $minus.removeClass(disClass);                    }                    if (value>=maxnum) {                        $plus.addClass(disClass);                    }else {                        $plus.removeClass(disClass);                    }                }                function checknull() {                    var value =$input.val();                    if(value === "" || value === "0"){                        $input.val(minnum);                    }                }                $input.keyup(function(evt){                    var value = $(this).val();                    var newvalue = value.replace(/[^\d]/g,"");                    $(this).val(newvalue);                    checknull();                });                $input.blur(function(){                    checknull();                    checkIlegal();                })                $minus.click(function(){                    minus();                     checkIlegal();                });                $plus.click(function(){                    add();                    checkIlegal();                });                function add () {                    var value = $input.val();                    var plus = parseInt(value)+1;                    $input.val(plus);                }                function minus () {                    var value = parseInt($input.val());                    var minus = value-1;                    $input.val(minus);                }            });        }        $.fn.goodsCount = goodsCount;
  </script>
  <script>
    $(function () {        +function () {            var index=0,            bsrc='',            timer=null,            box=$('.detail-show'),            origin=$('.origin-show'),            bigimg=box.find('.big-pic'),            tumb=box.find('.thumb-show'),            tumbItem=tumb.find('.item'),            zoomup=box.find('.zoomup'),            zoomshow=box.find('.zoom-show');            /*图片切换*/            tumbItem.on('mouseenter',function () {                index=$(this).index();                clearTimeout(timer);                timer=setTimeout(function (){                    update(index);                }, 300)            });            function update (index) {                bsrc=tumbItem.eq(index).find('.s-pic').attr('bsrc');                bigimg.attr('src', bsrc);                tumbItem.find('.s-pic').removeClass('active').end().eq(index).find('.s-pic').addClass('active');            }            update(index);            if ($('.detail-show .thumb-show .item').length>5) {                $('.detail-show .thumb-show').slick({                    slidesToShow: 5,                    infinite:false                });            }            /*放大镜*/            origin.on('mouseover mouseout',function (e) {                if (e.type=="mouseover") {                    var oX=$(this).offset().left,                    oY=$(this).offset().top,                    zX=e.pageX,                    zY=e.pageY,                    pW=$(this).outerWidth(),                    pH=$(this).outerHeight(),                    zW=zoomup.outerWidth(),                    zH=zoomup.outerHeight(),                    scale=pW/zW,                    zsW=zoomshow.width()*scale,//放大后的宽度                    factor=zsW/pW                    zoomshow.find('img').attr('src',bigimg.attr('src')).width(zsW);                    $(document).on('mousemove.zoom',function (e) {                        zX=e.pageX-oX- zW/2;                        zY=e.pageY-oY- zH/2;                        move();                    });                    function move () {                        zX=zX<=0?0:zX;                        zX=zX>=pW-zW?pW-zW:zX;                        zY=zY<=0?0:zY;                        zY=zY>=pH-zH?pH-zH:zY;                        zoomup.show().css({top:zY,left:zX});                        zoomshow.show().find('img').css({top:-zY*factor,left:-zX*factor});                    }                }                else {                    $(document).off('mousemove.zoom');                     zoomup.hide()                     zoomshow.hide();                }            });        }();        $('.mod-numbox').goodsCount(); //数量加减        $('.detail-main').zTab({            tabnav:'.detail-tabs',            trigger:'click'        });    });
  </script>
</html>
